<template>
  <div class="box">
    <h1>欢迎来到_Vue开发的收银系统_水果店</h1>
    <ul>
      <li>苹果 10￥ / 斤，折扣8折</li>
      <li>
        <span>请输入您要购买的斤数</span>
        <input type="text" v-model="catty">
      </li>
      <li>
        <button @click="count">结账买单~</button>
      </li>
      <li>结账单：总价：{{total}}￥ 折扣价：{{discountPrice}}￥ 省了：{{save}}￥</li>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      catty: 0, // 斤
      discount: 8, //折扣
      total: '', // 总价
      discountPrice: '', // 折扣价
      save: '' // 节省
    }
  },
  methods: {
    count () {
      this.total = this.catty * 10
      this.discountPrice = this.total * 8 / 10
      this.save = this.total -  this.discountPrice
    }
  }
}
</script>

<style>
.box {
  text-align:center;
  border: 1px solid pink;
}
ul {

  padding: 0;
}
ul>li {
  list-style: none;
  border: 1px solid pink;
}
</style>